<template>
  <div class="page">
    <div class="container">
      <pub-search
        v-model:searchColumns="state.searchColumns"
        v-model:searchForm="state.searchForm"
        mask-append-to="table-container"
        @search="getPageData"
      >
        <template #leftBtn>
          <!-- <pub-download
              url="customerList"
              fileType="excel"
              :params="state.searchForm"
              file-name="机构基本信息"
            >
              <template v-slot:default="slotProps">
                <el-button
                  :loading="slotProps.loading"
                  type="success"
                  :icon="Files"
                  class="btn-text-export"
                >
                  导出
                </el-button>
              </template>
            </pub-download> -->
        </template>
      </pub-search>
      <div class="table-container">
        <pub-table
          ref="pubTable"
          :column="state.columns"
          :data="state.tableData"
          :loading="tableLoading"
        >
          <template v-slot:option="scope">
            <el-button
              class="btn-row-info"
              plain
              type="primary"
              @click="detail(scope.row)"
            >
              详情
            </el-button>
            <el-button
              class="btn-row-info"
              plain
              type="primary"
              @click="orgStatus(scope.row)"
            >
              机构运营状态
            </el-button>
          </template>
        </pub-table>
      </div>
      <pub-pagination
        :total="total"
        v-model:page="state.searchForm.pageNum"
        v-model:limit="state.searchForm.pageSize"
        @pagination="getPageData"
      />
    </div>
    <!-- 机构运营状态弹窗 -->
    <pub-dialog title="机构运营状态" v-model="dialogStatus" width="1000px">
      <!-- <orgOperateStatus
          @success="getPageData()"
          @cancel="closeDialog"
          :orgData="state.orgData"
        ></orgOperateStatus> -->
    </pub-dialog>
  </div>
</template>

<script setup>
import { getOrgAccountList } from '@/api/ZFJG/FWJGGL/JGXXGL'
import { getOrgOptions } from '@/api/system'
import { ref, reactive, toRefs, onMounted, onBeforeMount, inject } from 'vue'
import { ElMessageBox, ElMessage } from 'element-plus'
import { appCurrentState } from '@/pinia/modules/app'
import { useUserStore } from '@/pinia/modules/user'
// import orgOperateStatus from './orgOperateStatus.vue'
import {
  Delete,
  Edit,
  Search,
  Share,
  Upload,
  Plus,
  Files
} from '@element-plus/icons-vue'
const userStore = useUserStore()
const userAreaArr = userStore.userAreaArr
const orgInfo = userStore.orgInfo
const currentState = appCurrentState()
const dialogFormVisible_add = ref(false)
const tableLoading = ref(false)
const total = ref(0)
const isSpread = ref(false)
const dialogStatus = ref(false)
const state = reactive({
  searchColumns: [
    {
      label: '单位所属行政区划',
      el: 'AreaSelect',
      bind: 'areaCode',
      defaultValue: '',
      disabledLevel: useUserStore().orgInfo.level - 1,
      defaultArea: useUserStore().userAreaArr,
      labelWidth: 140
    },
    {
      label: '申请日期',
      el: 'DateRange',
      bindBegin: 'applyStartDate',
      bindEnd: 'applyEndDate',
      defaultValue: '',
      labelWidth: 80
    },
    {
      label: '机构运营状态',
      el: 'Input',
      bind: 'operationState',
      defaultValue: '',
      labelWidth: 110
    },
    {
      label: '单位名称',
      el: 'Input',
      bind: 'orgName',
      defaultValue: '',
      labelWidth: 80
    },
    {
      label: '统一社会信用代码',
      el: 'Input',
      bind: 'creditCode',
      defaultValue: '',
      labelWidth: 140
    },
    {
      label: '机构登记类型',
      el: 'DictSelect',
      bind: 'registrationType',
      defaultValue: '',
      code: 'JGDJLX',
      labelWidth: 110
    },
    {
      label: '机构性质',
      el: 'DictSelect',
      bind: 'orgType',
      defaultValue: '',
      code: 'JGXZ',
      labelWidth: 80
    },
    {
      label: '是否县级特困人员供养服务机构',
      el: 'DictSelect',
      bind: 'isCountyPoverty',
      defaultValue: '',
      code: 'SF',
      labelWidth: 220
    },
    {
      label: '是否区域性敬老院',
      el: 'DictSelect',
      bind: 'isRegionalNursingHome',
      defaultValue: '',
      code: 'SF',
      labelWidth: 160
    }
  ],
  orgData: {},
  tableData: [],
  searchForm: {
    pageSize: 15,
    pageNum: 1
  },
  columns: [
    { label: '单位名称', prop: 'name', width: 200 },
    { label: '统一社会信用代码', prop: 'creditCode', width: 200 },
    { label: '所属行政区划', prop: 'inArea', width: 400 },
    { label: '单位建立日期', prop: 'buildDate', width: 140 },
    { label: '所在行政区划', prop: 'belongArea', width: 400 },
    { label: '法定代表人或负责人姓名', prop: 'legalName', width: 190 },
    { label: '法定代表人或负责人联系方式', prop: 'legalPhone', width: 220 },
    {
      label: '机构运营状态',
      prop: 'operationState',
      type: 'formatDict',
      formatCode: 'JGYYZT',
      width: 140
    },
    { label: '操作', type: 'option', width: 170, fixed: 'right' }
  ]
})

const changeComponents = inject('changeComponents')

const closeDialog = () => {
  console.log('关闭')
  dialogStatus.value = false
}

const detail = row => {
  currentState.SET_CURRENT_ID(row.id)
  changeComponents('detail')
}

const areaChange = val => {
  state.searchForm.areaCode = val
}

const fetchList = () => {
  state.searchForm.pageNum = 1
  getPageData()
}

const getPageData = async () => {
  tableLoading.value = true
  let res = await getOrgAccountList(state.searchForm)
  if (res.succeed) {
    state.tableData = res.data
    total.value = res.total
  }
  tableLoading.value = false
}

const orgStatus = row => {
  state.orgData = {
    pensionOrganizationId: row.id,
    beforeOperationState: row.operationState
  }
  dialogStatus.value = true
}

onMounted(() => {
  getPageData()
})

onBeforeMount(() => {})
</script>
<style lang="scss" scoped>
.table-container {
  height: calc(100% - 130px);
  flex: 1;
}
.table-web {
  height: 100% !important;
}
.isSpread {
  font-size: 14px;
  cursor: pointer;
  color: #409eff;
  position: relative;
  width: 54px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 30px;
  &::after {
    transition: 500ms;
    content: '';
    width: 10px;
    height: 10px;
    display: block;
    background: url('../../assets/common/rowIcon.png');
    background-size: 100% 100%;
    position: absolute;
    right: 0;
    top: 35%;
    transform: rotate(0);
  }
}
.isNoSpread {
  font-size: 14px;
  cursor: pointer;
  color: #409eff;
  position: relative;
  width: 54px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 30px;
  &::after {
    transition: 500ms;
    content: '';
    width: 10px;
    height: 10px;
    display: block;
    background: url('../../assets/common/rowIcon.png');
    background-size: 100% 100%;
    position: absolute;
    right: 0;
    top: 35%;
    transform: rotate(180deg);
  }
}
</style>
